import { FC, useState, useEffect } from 'react';
import styles from './style.less';
import 'swiper/swiper.less';
import classnames from 'classnames';
import SwiperCore, { Navigation, Controller } from 'swiper';

SwiperCore.use([Navigation, Controller]);
import 'swiper/components/navigation/navigation.less';
import 'swiper/components/effect-coverflow/effect-coverflow.less';
import { Swiper, SwiperSlide } from 'swiper/react';
interface Iprops {
  unit?: string;
  dataSource: {
    processes_name: string;
    COUNT: number;
  }[];
}
const SwiperList: FC<Iprops> = (props) => {
  const { unit = '家', dataSource } = props;
  const [swiperControl, setSwiperControl] = useState<any>(null);

  const [currentDataSource, setCurrentDataSource] = useState<
    {
      processes_name?: string;
      COUNT?: number;
    }[]
  >([]);

  useEffect(() => {
    const minLength = 8;
    let dataArr: {
      processes_name?: string;
      COUNT?: number;
    }[] = [];
    if (dataSource.length < 8) {
      dataArr.length = minLength - dataSource.length;
      dataArr.fill({
        processes_name: '',
        COUNT: undefined,
      });
    }
    const newData = [...dataSource, ...dataArr];
    setCurrentDataSource(newData);
  }, [dataSource]);
  // useEffect(() => {
  //     swiperControl && swiperControl.updateSlides()
  // }, [currentDataSource, swiperControl])

  const swiperScroll = (direction: 'next' | 'prev') => {
    switch (direction) {
      case 'next':
        swiperControl && swiperControl.slideNext();
        break;

      case 'prev':
        swiperControl && swiperControl.slidePrev();
        break;
    }
  };

  return (
    <div className={styles.swipper_container}>
      <div
        className={styles.prev_btn}
        onClick={() => swiperScroll('prev')}
      ></div>
      <div
        className={styles.next_btn}
        onClick={() => swiperScroll('next')}
      ></div>
      <div className={styles.inner_content}>
        <Swiper
          direction="vertical"
          width={189}
          height={475}
          initialSlide={0}
          updateOnWindowResize
          resizeObserver
          setWrapperSize
          spaceBetween={6}
          slidesPerView={6}
          onSwiper={setSwiperControl}
          controller={{ control: swiperControl }}
        >
          {currentDataSource.map(
            (
              item: {
                processes_name?: string;
                COUNT?: number;
              },
              index: number,
            ) => (
              <SwiperSlide key={index} className={styles.swiper_item}>
                {(() => {
                  const isnotEmpty =
                    item.processes_name &&
                    item.COUNT !== undefined &&
                    item.COUNT !== null;

                  return isnotEmpty ? (
                    <div className={styles.swiper_content}>
                      <p className={styles.item_title}>{item.processes_name}</p>
                      <p className={styles.item_value}>
                        <span>{item.COUNT}</span>
                        <span className={styles.unit}>{unit}</span>
                      </p>
                    </div>
                  ) : (
                    <div
                      className={classnames(
                        styles.swiper_content,
                        styles.isempty,
                      )}
                    ></div>
                  );
                })()}
              </SwiperSlide>
            ),
          )}
        </Swiper>
      </div>
    </div>
  );
};

export default SwiperList;
